import React, { useEffect, useState } from 'react';
import { useModel } from 'umi';
import styles from './classify.less';
const Home: React.FC = (props: any) => {
  let { getType, getTypeSingle, getNav } = useModel('typelist', model => ({
    getType: model.getType,
    getTypeSingle: model.getTypeSingle,
    getNav: model.getNav
  }));
  let [data, setData] = useState([]);
  let [id, updataId] = useState('');
  let [typeList, updataList] = useState([])
  let [ind, changInd] = useState(0)

  let [imgUrl, changeUrl] = useState({ name: '', id: '', wap_banner_url: '' })
  useEffect(() => {
    typeClick()
  }, []);
  async function typeClick() {

    let result = await getType();
    setData(result.data.categoryList);
    updataId(result.data.categoryList[0].id)
    let res = await getTypeSingle(result.data.categoryList[0].id)
    let nav = await getNav(result.data.categoryList[0].id);
    console.log(res.data.currentCategory.name, 'idwa')
    updataList(res.data.currentCategory.subCategoryList);
    console.log(res.data.currentCategory)
    changeUrl(res.data.currentCategory)
  }
  const listClick = async (id: string, index: number) => {
    console.log(id, index)
    updataId(id)
    let res = await getTypeSingle(id);
    let navlist = await getNav(id)
    updataList(res.data.currentCategory.subCategoryList)
    changeUrl(res.data.currentCategory);
    changInd(index)
  }
  const changUrl = async (id: string) => {
    console.log(231, props, 'djwwaddawjo')

    props.history.push(
      {
        pathname: "/information/" + id,
        query: {
          data: id
        }
      }
    )

  }
  return (
    <div className={styles.type} >
      {/* <button onClick={()=>changUrl()}>跳转</button> */}
      <div className={styles.left}>
        {(data as unknown as any).map((item: any, index: number) => {
          return <li key={item.id} onClick={() => listClick(item.id, index)} className={ind == index ? styles.title : ''}>{item.name}</li>
        })}
      </div>
      <div className={styles.right}>
        {

          <img src={imgUrl.wap_banner_url} alt="" className='img' />

        }
        <h3>{imgUrl.name} 分类 </h3>
        {(typeList as unknown as any).map((item: any) => {
          return <li key={item.id} onClick={() => changUrl(item.id)}>
            <img src={item.wap_banner_url} alt="" />
            <p>{item.name}</p>
          </li>
        })}
      </div>
    </div>
  );
}
export default Home
